<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车全选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            text-align: center;
        }
        
        button {
            width: 65px;
            height: 30px;
            font-size: 15px;
        }
        
        table {
            width: 300px;
            margin: 0 auto;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        
        th,
        td {
            border: 1px solid #c0c0c0;
            padding: 10px;
            color: #404060;
        }
        
        th {
            background: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div>请输入商品：<input type="text" id="shop"></div>
    <div>请输入价格：<input type="text" id="price"></div>
    <div>
        <button id="add">添加</button>
        <button id="select">反选</button>
        <button id="delSelect">删除选中</button>
        <button id="delAll">全部删除</button>
    </div>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="headCheck"></th>
                <th>商品</th>
                <th>价格</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone8</td>
                <td>8000</td>
                <td><a href="#" onclick="del(this)">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
                <td><a href="#" onclick="del(this)">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Air</td>
                <td>2000</td>
                <td><a href="#" onclick="del(this)">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple Watch</td>
                <td>2000</td>
                <td><a href="#" onclick="del(this)">删除</a></td>
            </tr>
        </tbody>
    </table>
    <script>
        /* 全选或全不选 */
        var headCheck = document.getElementById('headCheck')
        headCheck.onclick = function() {
            var bodyCheck = document.querySelector('tbody').querySelectorAll('input')
            for (var i = 0; i < bodyCheck.length; i++) {
                bodyCheck[i].checked = headCheck.checked
            }
            for (var i = 0; i < bodyCheck.length; i++) {
                bodyCheck[i].onclick = function() {
                    var flag = true
                    for (var j = 0; j < bodyCheck.length; j++) {
                        if (!bodyCheck[i].checked) {
                            flag = false
                            break
                        }
                    }
                    headCheck.checked = flag
                }
            }
        }

        /* 添加 */
        var add = document.getElementById('add')
        add.onclick = function() {
            var shop = document.getElementById('shop').value
            var price = document.getElementById('price').value
            document.querySelector('tbody').innerHTML += '<tr><td> <input type="checkbox"></td><td> ' + shop + '</td ><td> ' + price + '</td ><td td> <a href="#" onclick="del(this)">删除</a></td ></tr>'
        }

        /* 反选 */
        var select = document.getElementById('select')
        select.onclick = function() {
            var bodyCheck = document.querySelector('tbody').querySelectorAll('input')
            for (var i = 0; i <= bodyCheck.length; i++) {
                if (bodyCheck[i].checked == false) {
                    bodyCheck[i].checked = true
                } else {
                    bodyCheck[i].checked = false
                }
            }
        }

        /* 删除该行 */
        function del(obj) {
            if (confirm('您确定要删除吗？')) {
                var row = obj.parentNode;
                var row = obj.parentNode;
                while (row.tagName.toLowerCase() != "tr") {
                    row = row.parentNode;
                }
                row.parentNode.removeChild(row);
            }
        }


        /* 删除选中 */
        var delSelect = document.getElementById('delSelect')
        delSelect.onclick = function() {
            if (confirm('您确定要删除选中吗？')) {
                var bodyCheck = document.querySelector('tbody').querySelectorAll('input')
                for (var i = 0; i <= bodyCheck.length; i++) {
                    if (bodyCheck[i].checked == true) {
                        bodyCheck[i].parentNode.parentNode.parentNode.removeChild(bodyCheck[i].parentNode.parentNode)
                    }
                }
            }
        }

        /* 全部删除 */
        var delAll = document.getElementById('delAll')
        delAll.onclick = function() {
            if (confirm('您确定要删除选中吗？')) {
                var bodyCheck = document.querySelector('tbody').querySelectorAll('input')
                for (var i = 0; i <= bodyCheck.length; i++) {
                    bodyCheck[i].parentNode.parentNode.parentNode.removeChild(bodyCheck[i].parentNode.parentNode)
                }
            }
        }
    </script>
</body>

</html>